<!--区域管理-->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>用户管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="resources/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="resources/css/public.css" media="all" />
</head>
<body class="childrenBody">
<!--查询条件-->
<div class="layui-collapse" id="search">
    <blockquote class="layui-elem-quote quoteBox">
    <form class="layui-form" id="userTable" lay-filter="userTable">
	    <div class="layui-form-item layui-row">
            <div class="layui-form-item layui-row">
                <div class="layui-inline layui-col-md6">
                    <label class="layui-form-label">用户类型</label>
                	<div class="layui-input-block">
                	    <select name="type"  lay-filter="type">
                            <option value="-1">请选择用户类型：</option>
                            <option value="1">系统管理员</option>
                            <option value="2">卫生局</option>
                            <option value="3">卫生院</option>
                            <option value="4">卫生室</option>
                            <option value="5">供应商</option>
                        </select>
                	</div>
                </div>
                <div class="layui-inline layui-col-md6">
                    <label class="layui-form-label">登录名</label>
                	<div class="layui-input-block">
                		<input type="text" name="loginname" class="layui-input searchVal"/>
                	</div>
                </div>
            </div>
            <div class="layui-form-item layui-center">
                <div class="layui-input-block">
                   <button type="submit" class="layui-btn" lay-submit="" lay-filter="sub">查询</button>
                </div>
            </div>
        </div>
	</form>
	</blockquote>
</div>
<!--数据表格-->
<div>
    <table class="layui-hide" id="userShowTable" lay-filter="userShowTable"></table>
    <div id="toolBars" style="display: none">
        <button type="button" lay-event="add" class="layui-btn layui-btn-sm"><span class="layui-icon layui-icon-add-1"></span>添加</button>
    </div>
    <div id="rowBars" style="display: none">
        <button type="button" lay-event="show" class="layui-btn layui-btn-sm layui-btn-warm"><span class="layui-icon layui-icon-search"></span>查看</button>
        <button type="button" lay-event="update" class="layui-btn layui-btn-sm layui-bg-green"><span class="layui-icon layui-icon-edit"></span>修改</button>
        <button type="button" lay-event="delete" class="layui-btn layui-btn-sm layui-btn-danger"><span class="layui-icon layui-icon-delete"></span>删除</button>
    </div>
</div>
<!--添加修改弹出层-->
<div id="addOrUpdate" style="display: none">
    <form class="layui-form" id="addOrUpdateTable" lay-filter="addOrUpdateTable">
	    <div class="layui-form-item layui-row">
	        <div class="layui-form-item layui-row">
                <div class="layui-inline layui-col-md5">
                    <label class="layui-form-label">账号</label>
                	<div class="layui-input-block">
                		<input type="text" name="acount" id="acount" lay-verify="required|accountRepeat|account" class="layui-input searchVal"  />
                	</div>
                </div>
                <div class="layui-inline layui-col-md6">
                    <label class="layui-form-label">密码</label>
                	<div class="layui-input-block">
                		<input type="password" name="password" id="password" lay-verify="required|pass" class="layui-input searchVal"  />
                	</div>
                </div>
            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-inline layui-col-md5">
                    <label class="layui-form-label">用户类型</label>
                	<div class="layui-input-block">
                	    <select name="type" id="type" lay-verify="required" lay-filter="type">
                            <option value="-1">请选择用户类型：</option>
                            <option value="1">系统管理员</option>
                            <option value="2">卫生局</option>
                            <option value="3">卫生院</option>
                            <option value="4">卫生室</option>
                            <option value="5">供应商</option>
                        </select>
                	</div>
                </div>
                <div class="layui-inline layui-col-md6">
                    <label class="layui-form-label">登录名</label>
                	<div class="layui-input-block">
                		<input type="text" lay-verify="required" name="loginname" class="layui-input searchVal"/>
                	</div>
                </div>
            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-inline layui-col-md5">
                    <label class="layui-form-label">单位</label>
                	<div class="layui-input-block">
                	    <input type="hidden" name="state" value="1">
                		<select name="unitId" id="unitId"  lay-filter="unitId">
                		    <option value="0">无单位</option>
                        </select>
                	</div>
                </div>
                <div class="layui-inline layui-col-md6">
                    <label class="layui-form-label">邮政编码</label>
                	<div class="layui-input-block">
                		<input type="text" name="postal" class="layui-input searchVal"  />
                	</div>
                </div>
            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-inline layui-col-md5">
                    <label class="layui-form-label">联系人</label>
                	<div class="layui-input-block">
                	    <input type="hidden" name="id">
                		<input type="text" lay-verify="required" name="linkperson" class="layui-input searchVal"  />
                	</div>
                </div>
                <div class="layui-inline layui-col-md6">
                    <label class="layui-form-label">联系电话</label>
                	<div class="layui-input-block">
                		<input type="text" lay-verify="required|phone" name="linkphone" class="layui-input searchVal"  />
                	</div>
                </div>
            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-inline layui-col-md5">
                    <label class="layui-form-label">邮箱</label>
                	<div class="layui-input-block">
                	    <input type="hidden" name="id">
                		<input type="text" lay-verify="email" name="email" class="layui-input searchVal"  />
                	</div>
                </div>
                <div class="layui-inline layui-col-md6">
                    <label class="layui-form-label">备注</label>
                	<div class="layui-input-block">
                		<input type="text" name="remark" class="layui-input searchVal"  />
                	</div>
                </div>
            </div>
            <div class="layui-form-item layui-center">
                <div class="layui-input-block">
                   <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">提交</button>
                </div>
            </div>
        </div>
  	</form>
</div>
<!--查看弹出层-->
<div id="show" style="display: none">
    <form class="layui-form" id="showTable" lay-filter="showTable">
	    <div class="layui-form-item layui-row">
	        <div class="layui-form-item layui-row">
                <div class="layui-inline layui-col-md5">
                    <label class="layui-form-label">账号</label>
                	<div class="layui-input-block">
                		<input type="text" name="acount" readonly lay-verify="required|accountRepeat|account" class="layui-input searchVal"  />
                	</div>
                </div>
                <div class="layui-inline layui-col-md6">
                    <label class="layui-form-label">密码</label>
                	<div class="layui-input-block">
                		<input type="text" name="password" readonly lay-verify="required|pass" class="layui-input searchVal"  />
                	</div>
                </div>
            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-inline layui-col-md5">
                    <label class="layui-form-label">用户类型</label>
                	<div class="layui-input-block">
                	    <select name="type" id="typeShow" lay-verify="required" lay-filter="type">
                            <option value="-1">请选择用户类型：</option>
                            <option value="1">系统管理员</option>
                            <option value="2">卫生局</option>
                            <option value="3">卫生院</option>
                            <option value="4">卫生室</option>
                            <option value="5">供应商</option>
                        </select>
                        <div class="mydiv" title="不可修改" style="position:absolute;width: 100%;height: 100%;left: 0px;top: 0px;background: #fff;opacity: 0;filter:alpha(opacity=0)"></div>
                	</div>
                </div>
                <div class="layui-inline layui-col-md6">
                    <label class="layui-form-label">登录名</label>
                	<div class="layui-input-block">
                		<input type="text" lay-verify="required" readonly name="loginname" class="layui-input searchVal"/>
                	</div>
                </div>
            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-inline layui-col-md5">
                    <label class="layui-form-label">单位</label>
                	<div class="layui-input-block">
                	    <input type="hidden" name="state" value="1">
                		<select name="unitId" id="unitIdShow" readonly lay-filter="unitId">
                		    <option value="0">无单位</option>
                        </select>
                        <div class="mydiv" title="不可修改" style="position:absolute;width: 100%;height: 100%;left: 0px;top: 0px;background: #fff;opacity: 0;filter:alpha(opacity=0)"></div>
                	</div>
                </div>
                <div class="layui-inline layui-col-md6">
                    <label class="layui-form-label">邮政编码</label>
                	<div class="layui-input-block">
                		<input type="text" name="postal" readonly class="layui-input searchVal"  />
                	</div>
                </div>
            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-inline layui-col-md5">
                    <label class="layui-form-label">联系人</label>
                	<div class="layui-input-block">
                	    <input type="hidden" name="id">
                		<input type="text" lay-verify="required" readonly name="linkperson" class="layui-input searchVal"  />
                	</div>
                </div>
                <div class="layui-inline layui-col-md6">
                    <label class="layui-form-label">联系电话</label>
                	<div class="layui-input-block">
                		<input type="text" lay-verify="required|phone" readonly name="linkphone" class="layui-input searchVal"  />
                	</div>
                </div>
            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-inline layui-col-md5">
                    <label class="layui-form-label">邮箱</label>
                	<div class="layui-input-block">
                	    <input type="hidden" name="id">
                		<input type="text" lay-verify="email" name="email" readonly class="layui-input searchVal"  />
                	</div>
                </div>
                <div class="layui-inline layui-col-md6">
                    <label class="layui-form-label">备注</label>
                	<div class="layui-input-block">
                		<input type="text" name="remark" readonly class="layui-input searchVal"  />
                	</div>
                </div>
            </div>
        </div>
  	</form>
</div>
<script type="text/javascript" src="resources/layui/layui.js"></script>
<script type="text/javascript" src="/resources/layui_ext/dtree/dtree.js"></script>
<script>
    layui.use(['form','element','layer','jquery','table'],function(){
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        var table = layui.table;
        //自定义验证规则
        form.verify({
            account: [
                /^[\d]{6,12}$/
                ,'账号是6到12位的数字'
            ]
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
            ,accountRepeat: function(value){
                var msg = "";
                var isT = true;
                $.ajax({
                    url:"/user/getUserByAccount",
                    data:{account:value},
                    async:false,
                    success:function(res) {
                      if(res.length>0){//存在
                          msg = "账号已存在";
                          isT = false;
                      }
                    }
                });
                if(!isT){
                   return msg;
                }
            }
        });
        var tableIns = table.render({
            elem:"#userShowTable",
            url:"/user/loadUser",
            toolbar:"#toolBars",
            page:true,
            height:'full',
            cols:[
                [
                    {type:'checkbox',fixed:'center'}
                    ,{field:'id', title:'ID',  fixed: 'left', unresize: true,width:'80' ,sort: true,align:'center'}
                    ,{field:'acount', title:'账户',align:'center',width:'180'}
                    ,{field:'loginname', title:'登录名',align:'center',width:'150'}
                    ,{field:'type', title:'类型',align:'center',width:'150',templet:function(res) {
                        console.log(res)
                        return res.type==1?"系统管理员":
                        res.type==2?"卫生局":
                        res.type==3?"卫生院":
                        res.type==4?"卫生室":
                        res.type==5?"供应商":"";
                    }}
                    ,{field:'state', title:'状态',align:'center',width:'150',templet:function(res) {
                        return res.state==1?"可用":"禁用";
                    }}
                    ,{field:'linkplace', title:'联系地址',align:'center',width:'150'}
                    ,{field:'postal', title:'邮政编码',align:'center',width:'150'}
                    ,{field:'linkperson', title:'联系人',align:'center',width:'150'}
                    ,{field:'linkphone', title:'联系电话',align:'center',width:'150'}
                    ,{field:'email', title:'邮箱',align:'center',width:'150'}
                    ,{field:'remark', title:'备注',align:'center',width:'150'}
                    ,{fixed: 'right', title:'操作', toolbar: '#rowBars',width:260}
                ]
            ]
        });
        //填充单位
        form.on('select(type)', function(data){
            if(data.value==4){
                var html = '<option value="0">请选择医院：</option>';
                $.post("/hospital/loadAllHospital",function(data) {//查询所有的医院
                    $.each(data,function(index,item) {
                        html+='<option value="'+item.id+'">'+item.hospitalName+'</option>'
                    });
                    $("#unitId").html(html);
                    form.render();
                })

            }else if(data.value==5){
                var html = '<option value="0">请选择供应商：</option>';
                $.post("/provider/loadAllProvider",function(data) {//查询所有的医院
                    $.each(data,function(index,item) {
                        html+='<option value="'+item.id+'">'+item.providerName+'</option>'
                    })
                    $("#unitId").html(html);
                    form.render();
                })
            }else if(data.value==2||data.value==3){
                var html = '<option value="0">请选择监督机构：</option>';
                $.post("/supervise/loadAllSupervise",{type:data.value},function(data) {//查询所有的医院
                    $.each(data,function(index,item) {
                        html+='<option value="'+item.id+'">'+item.superviseName+'</option>'
                    })
                    $("#unitId").html(html);
                    form.render();
                })
            }else {
                $("#unitId").html("<option value='-1'>无单位</option>");
                form.render();
            }
        });
        //模糊表单提交
        form.on("submit(sub)",function(data) {
            tableIns.reload({
                where:data.field
            })
            return false;
        })

        var mainIns;
        var url;
        //监听头部工具栏事件
        table.on('toolbar(userShowTable)',function(obj) {
            switch (obj.event) {
                case 'add':
                    openAdd();
            }
        });
        //监听行工具栏事件
        table.on('tool(userShowTable)',function(obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'show':
                    openShow(data);
                    break;
                case 'update':
                    openUpdate(data);
                    break;
                case 'delete':
                    openDelete(data);
            }
        });
        //提交表单
        form.on('submit(submit)',function() {
            var params = $("#addOrUpdateTable").serialize();
            $.post(url,params,function(data) {
                //提示信息
                layer.msg(data.msg);
                //关闭弹出层
                layer.close(mainIns);
                //重新渲染table
                tableIns.reload();
            })
            return false;
        });
        //关闭弹出层
        form.on('submit(close)',function() {
            var params = $("#addOrUpdateTable").serialize();
            $.post(url,params,function(data) {
                //关闭弹出层
                layer.close(mainIns);
            })
            return false;
        });
        //打开添加弹出层
        function openAdd() {
            mainIns = layer.open({
                type:1,
                content:$("#addOrUpdate"),
                area:['900px','480px'],
                title:"添加用户",
                success:function(layero,index) {
                    //更改url
                    url = "/user/add";
                    $("#addOrUpdateTable")[0].reset();
                    $("#password").attr("type","password");
                    $("#acount").attr("readonly",false);
                    $("#acount").attr("lay-verify","required|accountRepeat|account");
                }
            })
        }
        //打开修改弹出层
        function openUpdate(data) {
            url = "/user/update";
            mainIns = layer.open({
                type:1,
                content:$("#addOrUpdate"),
                area:['800px','480px'],
                title:"修改用户",
                success:function(index) {
                    form.val("addOrUpdateTable",data);
                    if(data.type==4){
                        var html = '<option value="0">请选择医院：</option>';
                        $.post("/hospital/loadAllHospital",function(dat) {//查询所有的医院
                            $.each(dat,function(index,item) {
                                if(data.unitId==item.id){
                                    html+='<option selected value="'+item.id+'">'+item.hospitalName+'</option>'
                                }else {
                                    html+='<option value="'+item.id+'">'+item.hospitalName+'</option>'
                                }
                            });
                            $("#unitId").html(html);
                            $("#")
                            form.render();
                        })
                    }else if(data.type==5){
                        var html = '<option value="0">请选择供应商：</option>';
                        $.post("/provider/loadAllProvider",function(dat) {//查询所有的医院
                            $.each(dat,function(index,item) {
                                if(data.unitId==item.id){
                                    html+='<option selected value="'+item.id+'">'+item.providerName+'</option>'
                                }else {
                                    html+='<option value="'+item.id+'">'+item.providerName+'</option>'
                                }

                            })
                            $("#unitId").html(html);
                            form.render();
                        })
                    }else if(data.type==2||data.type==3){
                        var html = '<option value="0">请选择监督机构：</option>';
                        $.post("/supervise/loadAllSupervise",{type:data.value},function(dat) {//查询所有的医院
                            $.each(dat,function(index,item) {
                                if(data.unitId==item.id){
                                    html+='<option selected value="'+item.id+'">'+item.superviseName+'</option>'
                                }else {
                                    html+='<option value="'+item.id+'">'+item.superviseName+'</option>'
                                }

                            })
                            $("#unitId").html(html);
                            form.render();
                        })
                    }else {
                        $("#unitId").html("<option value='-1'>无单位</option>");
                        form.render();
                    }
                    $("#password").attr("type","text");
                    $("#acount").attr("readonly",true);
                    $("#acount").removeAttr("lay-verify");
                }
            })
        }

        //打开查看弹出层
        function openShow(data) {
            mainIns = layer.open({
                type:1,
                content:$("#show"),
                area:['800px','480px'],
                title:"查看用户",
                success:function(index) {
                    console.log(data);
                    form.val("showTable",data);
                    var unitName;
                    if(data.type==4){
                        $.ajax({
                            url:"/hospital/getHospitalById?id="+data.unitId,
                            type:"get",
                            async:false,
                            success:function(data){
                                unitName = data.hospitalName;
                            }
                        })
                    }else if(data.type==5){
                        $.ajax({
                            url:"/provider/getProviderById?id="+data.unitId,
                            type:"get",
                            async:false,
                            success:function(data) {
                                unitName = data.providerName;
                            }
                        })
                    }else if(data.type==2||data.type==3){
                        $.ajax({
                            url:"/supervise/getSuperviseById?id="+data.unitId,
                            type:"get",
                            async:false,
                            success:function(data){
                                unitName = data.superviseName;
                            }
                        })
                    }else{
                        $("#unitId").html("<option value='-1'>无单位</option>");
                        form.render();
                    }
                    $("#unitIdShow").html("<option>"+(unitName==undefined?'':unitName)+"</option>");
                    form.render();
                }
            })
        }
        //打开删除弹出层
        function openDelete(data) {
            mainIns = layer.confirm('您真的要删除吗？', {
                btn: ['删除','取消'] //按钮
            }, function(){
                $.post("/user/delete",{id:data.id},function(res) {
                    layer.msg(res.msg);
                    tableIns.reload();
                })
            })
        }

    })
</script>
</body>
</html>